<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> AI模型配置列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <el-table
                :data="tableData" border class="table" ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
                @row-dblclick="getConfigDetail"
            >
                <el-table-column prop="configName" label="配置名"></el-table-column>
                <el-table-column label="学习类型">
                    <template #default="scope">
                      <div v-if="scope.row.learningType === 'SUPERVISED_LEARNING'">
                        监督学习
                      </div>
                      <div v-else-if="scope.row.learningType === 'UNSUPERVISED_LEARNING'">
                        非监督学习
                      </div>
                    </template>
                </el-table-column>
              <el-table-column prop="fileInfoName" label="文件名"></el-table-column>
                <el-table-column label="特征字段" :show-overflow-tooltip="true">
                    <template #default="scope">{{ scope.row.features }}</template>
                </el-table-column>
              <el-table-column label="目标字段">
                <template #default="scope">{{ scope.row.label }}</template>
              </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                      <router-link :to="{path:'/ConfigDetail',query:{configId:scope.row.id}}">
                        <el-button type="text" >查看详情
                        </el-button>
                      </router-link>
                        <el-button type="text" class="red"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchData } from "../../api";
import {addConfig, deleteConfig, getAllConfig} from "../../api/config";
import {useRouter} from "vue-router";
import {getFileDetail} from "../../api/file";

export default {
  name: "config",
  setup() {
    const query = reactive({
        file: "",
        name: "",
        pageIndex: 1,
        pageSize: 10,
    });

    const multipleSelection =ref([]);

    const tableData = ref([]);

    const pageTotal = ref(0);

    const getpage=()=> {
      const payload ={
        userId: localStorage.getItem("ms_userId")
      }
      getAllConfig(payload).then(res => {
        tableData.value = res.result;
        pageTotal.value = tableData.value.length
        console.log(tableData.value)
        // for (let i in tableData.value){
        //   const filePayload={
        //     userId: 1,
        //     fileInfoId: tableData.value[i].fileInfoId
        //   }
        //   getFileDetail(filePayload).then(fileRes=>{
        //     tableData.value[i].fileName = fileRes.result.fileName
        //   })
        // }
      })
    };
     getpage();

    // 查询操作
      const handleSearch = () => {
          query.pageIndex = 1;
          getpage();
      };
      // 分页导航
      const handlePageChange = (val) => {
          query.pageIndex = val;
          getpage();
      };

      // 删除操作(单个)
      const handleDelete = (index) => {
          // 二次确认删除
          ElMessageBox.confirm("确定要删除吗？", "提示", {
              type: "warning",
          })
              .then(() => {
                let idx=tableData.value[index].id;
                console.log(idx);
                const payload ={
                  configId: idx,
                  userId: localStorage.getItem("ms_userId")
                }
                deleteConfig(payload
                ).then(res=>{
                  if(res.msg === '成功'){
                    ElMessage.success("删除成功!")
                    //location.reload();
                    getpage();
                  }
                  else {
                    ElMessage.error("删除失败"+res.msg)
                  }
                });

              })
              .catch(() => {});
      };

      //TODO
      const handleSelectionChange = (val) => {
        multipleSelection.value = val
      };

      const getConfigDetail=(row,column,event)=>{
        var configId=row.configId;
       let router=useRouter()
        router.push(`/ConfigDetail?configId=${configId}`)
      }
      // 表格编辑时弹窗和保存
      const editVisible = ref(false);
      let form = reactive({
          name: "",
          file: "",
      });

      return {
          query,
          tableData,
          pageTotal,
          editVisible,
          form,
          handleSearch,
          handlePageChange,
          handleDelete,
          handleSelectionChange,
          getConfigDetail,
          getpage,
      };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
    margin-left: 10px;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
